<template>
  <div class="lost-found-page">
    <common-header />
    
    <!-- 顶部横幅 -->
    <div class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title">失物招领</h1>
        <p class="hero-subtitle">帮助物品找到它的主人</p>
        <div class="search-box">
          <el-input
            v-model="searchQuery"
            placeholder="搜索物品描述、地点..."
            prefix-icon="el-icon-search"
            clearable
            class="main-search"
          >
            <el-button slot="append" type="primary" @click="handleSearch">搜索</el-button>
          </el-input>
        </div>
      </div>
    </div>

    <!-- 快捷操作区 -->
    <div class="quick-actions">
      <div class="action-card" @click="showPublishDialog">
        <div class="action-icon">
          <i class="el-icon-plus"></i>
        </div>
        <span>发布信息</span>
      </div>
      <div class="action-card" @click="toggleFilter(1)">
        <div class="action-icon">
          <i class="el-icon-search"></i>
        </div>
        <span>寻物启事</span>
      </div>
      <div class="action-card" @click="toggleFilter(2)">
        <div class="action-icon">
          <i class="el-icon-goods"></i>
        </div>
        <span>招领启事</span>
      </div>
      <div class="action-card" @click="toggleFilter(3)">
        <div class="action-icon">
          <i class="el-icon-time"></i>
        </div>
        <span>最新发布</span>
      </div>
    </div>

    <!-- 内容展示区 -->
    <div class="content-container" v-loading="loading">
      <div class="filter-section">
        <div class="filter-tags">
          <span 
            v-for="(tag, index) in filterTags" 
            :key="index"
            :class="['filter-tag', { active: tag.active }]"
            @click="toggleFilter(index)"
          >
            {{ tag.name }}
          </span>
        </div>
      </div>

      <div class="items-grid">
        <div
          v-for="item in items"
          :key="item.id"
          class="item-card"
          :class="{ 'claimed': item.status === 'claimed' }"
          @click="showDetail(item)"
        >
          <div class="card-image">
            <el-image 
              :src="item.images[0]" 
              fit="cover"
            >
              <div slot="error" class="image-placeholder">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <div class="card-badge" :class="item.type">
              {{ item.type === 'lost' ? '寻物' : '招领' }}
              <span v-if="item.status === 'claimed'" class="claimed-badge">已认领</span>
            </div>
          </div>
          
          <div class="card-info">
            <h3 class="card-title">{{ item.title }}</h3>
            <p class="card-desc">{{ item.description }}</p>
            <div class="card-meta">
              <span class="meta-item">
                <i class="el-icon-location"></i>
                {{ item.location }}
              </span>
              <span class="meta-item">
                <i class="el-icon-date"></i>
                {{ item.date }}
              </span>
            </div>
            <div class="card-footer">
              <div class="user-info">
                <el-avatar :src="item.userAvatar" size="small"></el-avatar>
                <span class="username">{{ item.username }}</span>
              </div>
              <div class="card-stats">
                <span><i class="el-icon-view"></i> {{ item.views }}</span>
                <span><i class="el-icon-chat-dot-round"></i> {{ item.comments }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 加载更多 -->
      <div class="load-more" v-if="!loading && hasMore">
        <el-button type="text" @click="loadMore">
          <i class="el-icon-more"></i> 加载更多
        </el-button>
      </div>
    </div>

    <!-- 发布对话框 -->
    <el-dialog
      title="发布失物招领信息"
      :visible.sync="publishDialog.visible"
      width="600px"
      custom-class="publish-dialog"
    >
      <div class="publish-form-header">
        <div class="type-selector">
          <div 
            class="type-option" 
            :class="{ active: publishForm.type === 'lost' }"
            @click="publishForm.type = 'lost'"
          >
            <div class="type-icon">
              <i class="el-icon-search"></i>
            </div>
            <div class="type-text">
              <h3>寻物启事</h3>
              <p>发布丢失物品信息</p>
            </div>
          </div>
          <div 
            class="type-option"
            :class="{ active: publishForm.type === 'found' }"
            @click="publishForm.type = 'found'"
          >
            <div class="type-icon">
              <i class="el-icon-goods"></i>
            </div>
            <div class="type-text">
              <h3>招领启事</h3>
              <p>发布拾获物品信息</p>
            </div>
          </div>
        </div>
      </div>

      <el-form :model="publishForm" :rules="publishRules" ref="publishForm" label-width="0" class="publish-form">
        <el-form-item prop="title">
          <el-input 
            v-model="publishForm.title" 
            placeholder="请输入标题，简要描述物品"
            class="form-input"
          >
            <template slot="prepend">
              <i class="el-icon-edit"></i>
            </template>
          </el-input>
        </el-form-item>
        
        <el-form-item prop="description">
          <el-input
            type="textarea"
            v-model="publishForm.description"
            :rows="4"
            placeholder="请详细描述物品特征、丢失/拾获经过等，以便更好地帮助失主寻找"
            class="form-textarea"
          ></el-input>
        </el-form-item>
        
        <div class="form-row">
          <el-form-item prop="location" class="form-col">
            <el-input 
              v-model="publishForm.location" 
              placeholder="地点"
              class="form-input"
            >
              <template slot="prepend">
                <i class="el-icon-location"></i>
              </template>
            </el-input>
          </el-form-item>
          
          <el-form-item prop="date" class="form-col">
            <el-date-picker
              v-model="publishForm.date"
              type="date"
              placeholder="日期"
              class="form-date"
            ></el-date-picker>
          </el-form-item>
        </div>
        
        <el-form-item prop="contact">
          <el-input 
            v-model="publishForm.contact" 
            placeholder="请输入您的联系方式（手机号/微信/邮箱等）"
            class="form-input"
          >
            <template slot="prepend">
              <i class="el-icon-phone"></i>
            </template>
          </el-input>
        </el-form-item>
        
        <el-form-item label="" prop="imageUrl" class="upload-section">
          <div class="upload-title">
            <i class="el-icon-picture"></i>
            <span>上传图片（最多6张）</span>
          </div>
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="handleImageChange"
            :limit="6"
            class="image-uploader"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="publishDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="submitPublish">发布</el-button>
      </div>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog
      :title="detailDialog.item ? detailDialog.item.title : ''"
      :visible.sync="detailDialog.visible"
      width="800px"
      class="detail-dialog"
    >
      <div v-if="detailDialog.item" class="detail-content">
        <el-carousel height="400px" indicator-position="outside">
          <el-carousel-item v-for="(img, index) in detailDialog.item.images" :key="index">
            <el-image :src="img" fit="contain"></el-image>
          </el-carousel-item>
        </el-carousel>
        
        <div class="detail-info">
          <div class="user-info">
            <el-avatar :src="detailDialog.item.userAvatar"></el-avatar>
            <div class="user-meta">
              <span class="username">{{ detailDialog.item.username }}</span>
              <span class="time">{{ detailDialog.item.time }}</span>
            </div>
          </div>
          
          <div class="detail-description">
            <h3>详细描述</h3>
            <p>{{ detailDialog.item.description }}</p>
          </div>
          
          <div class="detail-meta">
            <div class="meta-item">
              <i class="el-icon-location"></i>
              <span>地点：{{ detailDialog.item.location }}</span>
            </div>
            <div class="meta-item">
              <i class="el-icon-date"></i>
              <span>日期：{{ detailDialog.item.date }}</span>
            </div>
          </div>
          
          <div class="contact-info">
            <h3>联系方式</h3>
            <p>{{ detailDialog.item.contact }}</p>
          </div>
        </div>
        
        <!-- 评论区 -->
        <div class="comments-section">
          <h3>评论区</h3>
          <div class="comment-list">
            <div v-for="comment in detailDialog.item.commentList" :key="comment.id" class="comment-item">
              <el-avatar :src="comment.userAvatar" size="small"></el-avatar>
              <div class="comment-content">
                <div class="comment-header">
                  <span class="comment-username">{{ comment.username }}</span>
                  <span class="comment-time">{{ comment.time }}</span>
                </div>
                <p class="comment-text">{{ comment.content }}</p>
              </div>
            </div>
          </div>
          
          <div class="comment-input">
            <el-input
              v-model="commentText"
              type="textarea"
              :rows="2"
              placeholder="写下你的评论..."
            ></el-input>
            <el-button type="primary" @click="submitComment">发表评论</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CommonHeader from '@/components/Header.vue'
import request from '@/utils/request'

export default {
  name: 'LostFoundPage',
  components: {
    CommonHeader
  },
  data() {
    return {
      loading: false,
      hasMore: true,
      searchQuery: '',
      filterTags: [
        { name: '全部', active: true, type: 'all' },
        { name: '寻物启事', active: false, type: '1' },
        { name: '招领启事', active: false, type: '0' },
        { name: '最新发布', active: false, type: 'latest' },
        { name: '已认领', active: false, type: 'claimed' }
      ],
      items: [],
      publishDialog: {
        visible: false
      },
      publishForm: {
        type: 'lost',
        title: '',
        description: '',
        location: '',
        date: '',
        imageUrl: '',
        contact: ''
      },
      publishRules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
        location: [{ required: true, message: '请输入地点', trigger: 'blur' }],
        date: [{ required: true, message: '请选择日期', trigger: 'change' }],
        contact: [{ required: true, message: '请输入联系方式', trigger: 'blur' }]
      },
      detailDialog: {
        visible: false,
        item: null
      },
      commentText: '',
      uploadedImages: []
    }
  },
  methods: {
    handleSearch() {
      if (!this.searchQuery.trim()) {
        this.fetchLostFoundItems()
        return
      }
      
      const searchUrl = `/api/lost-found/?search=${encodeURIComponent(this.searchQuery)}`
      this.fetchLostFoundItems(searchUrl)
    },
    toggleFilter(index) {
      this.filterTags.forEach((tag, i) => {
        tag.active = i === index
      })
      this.filterItems()
    },
    filterItems() {
      const activeFilter = this.filterTags.find(tag => tag.active)
      if (!activeFilter) return

      switch (activeFilter.type) {
        case 'all':
          this.fetchLostFoundItems()
          break
        case '0': // 招领启事
        case '1': // 寻物启事
          this.fetchLostFoundItems(`/api/lost-found/?type=${activeFilter.type}`)
          break
        case 'latest':
          this.fetchLostFoundItems('/api/lost-found/?sort=createTime,desc')
          break
        case 'claimed':
          this.fetchLostFoundItems('/api/lost-found/?status=1')
          break
      }
    },
    loadMore() {
      // 实现加载更多逻辑
    },
    showPublishDialog() {
      this.publishDialog.visible = true
    },
    handleImageChange(file) {
      // 处理图片上传
      if (!file.raw.type.startsWith('image/')) {
        this.$message.error('请上传图片文件')
        return false
      }

      const formData = new FormData()
      formData.append('file', file.raw)

      // 显示上传加载状态
      this.$set(file, 'status', 'uploading')
      this.$set(file, 'percentage', 0)

      // 调用上传接口
      request({
        url: '/api/upload/image',
        method: 'post',
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: (progressEvent) => {
          // 更新上传进度
          const percentage = Math.round((progressEvent.loaded * 100) / progressEvent.total)
          this.$set(file, 'percentage', percentage)
        }
      }).then(response => {
        if (response.code === 200) {
          // 上传成功，使用图床返回的URL
          this.$set(file, 'status', 'success')
          this.$set(file, 'url', response.data)
          
          // 存储已上传的图片URL
          this.uploadedImages.push(response.data)
          this.publishForm.imageUrl = response.data
          
          this.$message.success('图片上传成功')
        } else {
          // 上传失败
          this.$set(file, 'status', 'error')
          this.$message.error(response.message || '图片上传失败')
        }
      }).catch(error => {
        // 上传出错
        this.$set(file, 'status', 'error')
        
        // 处理不同类型的错误
        if (error.response) {
          // 服务器返回错误状态码
          if (error.response.status === 404) {
            this.$message.error('图床服务不可用，请联系管理员')
          } else {
            this.$message.error('图床服务异常，请联系管理员')
          }
        } else if (error.request) {
          // 请求发出但没有收到响应
          this.$message.error('无法连接到图床服务，请检查网络或联系管理员')
        } else {
          // 请求配置出错
          this.$message.error('图片上传失败：' + error.message)
        }
        
        // 记录错误日志
        console.error('图片上传错误:', error)
      })
    },
    submitPublish() {
      this.$refs.publishForm.validate(async (valid) => {
        if (valid) {
          try {
            const response = await request({
              url: '/api/lost-found',
              method: 'post',
              data: {
                type: this.publishForm.type,
                title: this.publishForm.title,
                description: this.publishForm.description,
                location: this.publishForm.location,
                date: this.publishForm.date,
                imageUrl: this.publishForm.imageUrl,
                contact: this.publishForm.contact
              }
            })

            if (response.code === 200) {
              this.$message.success('发布成功')
              this.publishDialog.visible = false
              this.resetPublishForm()
              this.fetchLostFoundItems() // 刷新列表
            } else {
              this.$message.error(response.message || '发布失败')
            }
          } catch (error) {
            this.$message.error('发布失败：' + error.message)
          }
        }
      })
    },
    resetPublishForm() {
      this.publishForm = {
        type: 'lost',
        title: '',
        description: '',
        location: '',
        date: '',
        imageUrl: '',
        contact: ''
      }
      this.uploadedImages = []
      if (this.$refs.publishForm) {
        this.$refs.publishForm.resetFields()
      }
    },
    handleDialogClose() {
      this.resetPublishForm()
    },
    showDetail(item) {
      this.detailDialog.item = {
        ...item,
        images: [item.images[0]]
      }
      this.detailDialog.visible = true
    },
    handleContact(item) {
      // 实现联系功能
      this.$alert(item.contact, '联系方式', {
        confirmButtonText: '确定',
        callback: () => {
          // 可以记录查看联系方式的行为
          console.log('查看联系方式:', item.id)
        }
      })
    },
    handleShare(item) {
      // 实现分享功能
      const shareData = {
        title: item.title,
        text: item.description,
        url: window.location.href
      }
      
      if (navigator.share) {
        navigator.share(shareData)
          .then(() => {
            this.$message.success('分享成功')
          })
          .catch((error) => {
            console.log('分享失败:', error)
            this.fallbackShare(item)
          })
      } else {
        this.fallbackShare(item)
      }
    },
    fallbackShare(item) {
      // 复制链接到剪贴板
      const dummy = document.createElement('textarea')
      document.body.appendChild(dummy)
      dummy.value = `${item.title}\n${window.location.href}`
      dummy.select()
      document.execCommand('copy')
      document.body.removeChild(dummy)
      this.$message.success('链接已复制到剪贴板')
    },
    submitComment() {
      // 提交评论
    },
    async fetchLostFoundItems(url = '/api/lost-found/') {
      try {
        this.loading = true
        const response = await request({
          url,
          method: 'get'
        })
        
        if (response.code === 200) {
          this.items = response.data.map(item => ({
            id: item.id,
            type: item.type === '0' ? 'found' : 'lost',
            title: item.title,
            description: item.description,
            location: item.location,
            date: new Date(item.createTime).toLocaleDateString(),
            time: new Date(item.createTime).toLocaleString(),
            images: [item.imageUrl],
            username: '用户' + item.userName,
            userAvatar: 'https://via.placeholder.com/40',
            status: item.status === '1' ? 'claimed' : 'pending',
            views: 0,
            comments: 0,
            contact: '联系方式待完善',
            commentList: []
          }))
        } else {
          this.$message.error(response.message || '获取失物招领数据失败')
        }
      } catch (error) {
        console.error('获取失物招领数据出错:', error)
        this.$message.error('获取数据失败，请稍后重试')
      } finally {
        this.loading = false
      }
    },
  },
  created() {
    this.fetchLostFoundItems()
  },
  watch: {
    'publishDialog.visible'(val) {
      if (!val) {
        this.handleDialogClose()
      }
    }
  }
}
</script>

<style scoped>
.lost-found-page {
  min-height: 100vh;
  background-color: #f8f9fa;
}

.hero-section {
  height: 400px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff10" fill-opacity="1" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,208C1248,224,1344,192,1392,176L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.1;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 20px 0;
  text-align: center;
  color: white;
  position: relative;
  z-index: 1;
}

.hero-title {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: 2px;
}

.hero-subtitle {
  font-size: 20px;
  opacity: 0.9;
  margin-bottom: 40px;
}

.search-box {
  max-width: 600px;
  margin: 0 auto;
}

.main-search {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.main-search .el-input__inner {
  height: 56px;
  font-size: 16px;
  border-radius: 28px;
}

.quick-actions {
  max-width: 800px;
  margin: -40px auto 0;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
  z-index: 2;
}

.action-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.action-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.action-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  background: #f0f4ff;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-icon i {
  font-size: 24px;
  color: #6366f1;
}

.action-card span {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

.content-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

.filter-section {
  margin-bottom: 30px;
}

.filter-tags {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-tag {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  background: white;
  color: #6b7280;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.filter-tag:hover {
  background: #f3f4f6;
}

.filter-tag.active {
  background: #6366f1;
  color: white;
}

.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.item-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.item-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.card-image {
  position: relative;
  padding-bottom: 75%;
}

.card-image .el-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 24px;
}

.card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.card-badge.lost {
  background: rgba(239, 68, 68, 0.9);
}

.card-badge.found {
  background: rgba(16, 185, 129, 0.9);
}

.claimed-badge {
  margin-left: 4px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  font-size: 11px;
}

.card-info {
  padding: 16px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-desc {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.meta-item {
  font-size: 12px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.username {
  font-size: 13px;
  color: #4b5563;
}

.card-stats {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #9ca3af;
}

.card-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.load-more {
  text-align: center;
  margin-top: 40px;
}

.load-more .el-button {
  font-size: 16px;
  color: #6366f1;
}

@media screen and (max-width: 768px) {
  .hero-section {
    height: 300px;
  }

  .hero-title {
    font-size: 36px;
  }

  .hero-subtitle {
    font-size: 16px;
  }

  .quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }

  .items-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }
}

@media screen and (max-width: 480px) {
  .hero-title {
    font-size: 28px;
  }

  .quick-actions {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .action-card {
    padding: 12px;
  }

  .action-icon {
    width: 36px;
    height: 36px;
  }

  .action-icon i {
    font-size: 18px;
  }
}

/* 发布对话框样式 */
.publish-dialog {
  border-radius: 16px;
}

.publish-dialog :deep(.el-dialog__header) {
  padding: 0;
  margin: 0;
}

.publish-dialog :deep(.el-dialog__headerbtn) {
  top: 16px;
  right: 16px;
  z-index: 10;
}

.publish-dialog :deep(.el-dialog__body) {
  padding: 0;
}

.publish-form-header {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  padding: 24px;
  border-radius: 16px 16px 0 0;
  position: relative;
}

.type-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.type-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.type-option.active {
  background: white;
}

.type-icon {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.type-option.active .type-icon {
  background: #f0f4ff;
}

.type-icon i {
  font-size: 20px;
  color: white;
}

.type-option.active .type-icon i {
  color: #6366f1;
}

.type-text {
  flex: 1;
}

.type-text h3 {
  font-size: 16px;
  font-weight: 600;
  color: white;
  margin: 0 0 4px;
}

.type-option.active .type-text h3 {
  color: #1f2937;
}

.type-text p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.type-option.active .type-text p {
  color: #6b7280;
}

.publish-form {
  padding: 24px;
}

.form-input :deep(.el-input__inner) {
  height: 48px;
  font-size: 14px;
}

.form-input :deep(.el-input-group__prepend) {
  background: #f3f4f6;
  border-color: #e5e7eb;
  padding: 0 16px;
}

.form-input :deep(.el-input-group__prepend) i {
  font-size: 18px;
  color: #6b7280;
}

.form-textarea :deep(.el-textarea__inner) {
  padding: 12px;
  font-size: 14px;
  border-color: #e5e7eb;
  border-radius: 8px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-date {
  width: 100%;
}

.form-date :deep(.el-input__inner) {
  height: 48px;
}

.upload-section {
  margin-top: 24px;
}

.upload-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: #4b5563;
}

.upload-title i {
  font-size: 18px;
}

.image-uploader :deep(.el-upload--picture-card) {
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 8px;
}

.dialog-footer {
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.dialog-footer .el-button {
  padding: 12px 24px;
  font-size: 14px;
  border-radius: 8px;
}

@media screen and (max-width: 640px) {
  .publish-dialog {
    width: 90% !important;
    margin: 0 auto;
  }

  .type-selector {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}
</style> 